{% extends "layout.html" %}

{% block extra_css %}
    <style>
        .node circle {
            fill: #999;
        }
        .node text {
            font: 10px sans-serif;
        }
        .node--internal circle {
            fill: #555;
        }
        .node--internal text {
            text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
        }
        .link {
            fill: none;
            stroke: #555;
            stroke-opacity: 0.4;
            stroke-width: 1.5;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <ol class="breadcrumb">
            <li><a href="/">后台管理</a></li>
            <li><a href="javascript:void(0);" onclick="$('#menu-user').trigger('click');">会员管理</a></li>
            <li class="active">会员关系</li>
        </ol>

        <form class="form-inline">
            <div class="form-group{% if form.user_id.errors %} has-error{% endif %}">
                {{ form.user_id.label(class="sr-only") }}
                {{ form.user_id(class="form-control", placeholder="用户ID") }}
                {% for error in form.user_id.errors %}
                    <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>
            <div class="form-group{% if form.user_name.errors %} has-error{% endif %}">
                {{ form.user_name.label(class="sr-only") }}
                {{ form.user_name(class="form-control", placeholder="用户名称") }}
                {% for error in form.user_name.errors %}
                    <span class="help-block">{{ error }}</span>
                {% endfor %}
            </div>
            <button type="submit" class="btn btn-primary" name="op" value="0">Search</button>
        </form>

        <hr/>

        {% include 'user/_team_tree.html' %}

{#        <svg width="960" height="1060"></svg>#}
    </div>

{% endblock %}

{% block extra_js %}
    <script src="{{ url_for('static', filename='plugin/d3/d3.min.js') }}"></script>
    <script>

        var svg = d3.select("svg"),
                width = +svg.attr("width"),
                height = +svg.attr("height"),
                g = svg.append("g").attr("transform", "translate(" + (width / 2 + 40) + "," + (height / 2 + 90) + ")");

        var stratify = d3.stratify()
                .parentId(function (d) {
                    return d.id.substring(0, d.id.lastIndexOf("."));
                });

        var tree = d3.tree()
                .size([2 * Math.PI, 500])
                .separation(function (a, b) {
                    return (a.parent == b.parent ? 1 : 2) / a.depth;
                });

        d3.csv('{{ url_for('static', filename='csv/flare.csv') }}', function (error, data) {
            if (error) throw error;

            var root = tree(stratify(data));

            var link = g.selectAll(".link")
                    .data(root.links())
                    .enter().append("path")
                    .attr("class", "link")
                    .attr("d", d3.linkRadial()
                            .angle(function (d) {
                                return d.x;
                            })
                            .radius(function (d) {
                                return d.y;
                            }));

            var node = g.selectAll(".node")
                    .data(root.descendants())
                    .enter().append("g")
                    .attr("class", function (d) {
                        return "node" + (d.children ? " node--internal" : " node--leaf");
                    })
                    .attr("transform", function (d) {
                        return "translate(" + radialPoint(d.x, d.y) + ")";
                    });

            node.append("circle")
                    .attr("r", 2.5);

            node.append("text")
                    .attr("dy", "0.31em")
                    .attr("x", function (d) {
                        return d.x < Math.PI === !d.children ? 6 : -6;
                    })
                    .attr("text-anchor", function (d) {
                        return d.x < Math.PI === !d.children ? "start" : "end";
                    })
                    .attr("transform", function (d) {
                        return "rotate(" + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 180 / Math.PI + ")";
                    })
                    .text(function (d) {
                        return d.id.substring(d.id.lastIndexOf(".") + 1);
                    });
        });

        function radialPoint(x, y) {
            return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
        }

    </script>
{% endblock %}
